import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import OrderSearch from './components/Filter/OrderShipFilter/index';
import OrderList from './components/OrderList';
import CommonTab from '@/components/CommonTab';
import { getOrderShipList, getStatisticsOp, getHotStatisticsOp } from './services';
import { useResize } from '../common/hooks/useResize';

const OrderShip = () => {

	const [type, setType] = useState('1');
  const [staticNumberObj, setStaticNumberObj] = useState({});
	const [searchForm, setSearchForm] = useState({ pageType: type, isLimit: true });
	const navigate = useNavigate();

	const { el: filterEl, height: filterHeight, onResize } = useResize();

	useEffect(()=>{
		if(!searchForm.isLimit){
			getHotStatisticsFunc();
		}
	}, [searchForm])

	// useEffect(()=>{
	// 	console.log(staticNumberObj)
	// }, [staticNumberObj])

	const getHotStatisticsFunc = async () => {
		const promiseArr = [getStatisticsOp({pageType : 2}), type != 4 && getHotStatisticsOp(type, searchForm.timeOutSetting || 12, searchForm.pickUptimeOutSetting || 6)];
		Promise.all(promiseArr).then(res=>{
			setStaticNumberObj({
				...(res?.[0]?.data || {}),
				...(res?.[1]?.data || {}),
			});
		})
  }

	const tabList = [
		{ key: '1', tab: '待审核', extra: { num: staticNumberObj['awaitDispose'] || 0 } },
		{ key: '2', tab: '待发货', extra: { num: staticNumberObj['noShip'] || 0 } },
		{ key: '3', tab: '已发货' },
		{ key: '4', tab: '已作废' },
		{ key: '5', tab: '售后单' },
	]

	//Tab区
	const TabProps = {
		type,
		data: tabList,
		onChange(type) {
			if(type == 5){
				return navigate('/views/afterSales/salesOrder')
			}
			setType(type);
		},
	};

	const SearchProps = {
		type,
		onResize,
		searchForm,
		staticNumberObj,
		async getHotStatisticsFunc(val){
			const { data, success } = await getHotStatisticsOp(type, val, val);
			if(success){
				setStaticNumberObj({...staticNumberObj, ...(data || {})});
			}
		},
		handleSearch(values){
			setSearchForm({...values, isLimit: false});
		}
	}

	return (
		<div className='zjf-container-nof'>
			<div ref={filterEl} style={{marginBottom: '28px'}}>
				<CommonTab {...TabProps} />
				<OrderSearch {...SearchProps} />
			</div>
			
			<OrderList
			  type={type}
				form={searchForm}
				filterSize={0}
				extraHeight={80}
				getHotStatisticsFunc={getHotStatisticsFunc}
				//tableHeader={tableHeader}
				actions="orderShip"
				ajaxFn={getOrderShipList}
			/>
		</div>

	);
};

export default OrderShip;
